<template>
    <div>
      <div style="margin-top: 15px; margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input placeholder="请输入内容" class="input-with-select" v-model="message">
              <el-button slot="append" icon="el-icon-search" @click="searchByName"></el-button>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-button type="success" @click="add">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 100%" max-height="100%">
        <el-table-column fixed prop="id" label="id" width="150">
        </el-table-column>
        <el-table-column prop="name" label="功能" width="120">
        </el-table-column>
        <el-table-column prop="code" label="编码" width="220">
        </el-table-column>
        <el-table-column prop="link" label="地址" width="220">
        </el-table-column>
        <el-table-column prop="pid" label="数量" width="220">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="220">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="50">            
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="editRow(scope)"
              type="primary"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope)"
              type="danger"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增和编辑公用的弹窗 -->
      <el-dialog
        :title="title"
        :visible.sync="centerDialogVisible"
        width="35%"
        center
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="功能">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.link"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.pid"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              style="display: block; margin-top: 9px"
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="激活"
              inactive-text="禁用"
              active-value="Y"
              inactive-value="N"
            >
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 引入分页组件 -->
      <Pagenation style="margin-top: 20px" :total="pageInfo.total" :pageSize="pageInfo.pageSize"
       @changeSize="changeSize" @changePage="changePage"/>
    </div>
  </template>
  
  <script>
    import Pagenation from "../../components/pagenation/perm.vue";
    export default {
      data() {
        return {
          title: "",
          tableData: [],
          centerDialogVisible: false,
          form: {
            id: 0,
            name: "",
            code:"",
            link:"",
            pid:"",
            type: "",
            status: "Y",
          },
          pageInfo:{
            currentPage:1,
            pageSize:10,
            total:0
          },
          message:"",
        };
      },
      components: { Pagenation },
      created() {
        this.iniPageData();
      },
      methods: {  
        iniPageData() {
          this.$axios.get("/rbacPerm/selectAll/"+this.pageInfo.currentPage+"/"+this.pageInfo.pageSize)
            .then((res) => {
              console.log(res);
              this.tableData = res.data.data.list;
              this.pageInfo.currentPage=res.data.data.pageNum,
              this.pageInfo.pageSize=res.data.data.pageSize,
              this.pageInfo.total=res.data.data.total
            })
            .catch();
        },
        deleteRow(scope) {
          console.log(scope.row);
          this.$axios
            .get("/rbacPerm/deleteById?id=" + scope.row.id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$notify({
                  title: "成功",
                  message: res.data.msg,
                  type: "success",
                });
                this.iniPageData();
              } else {
                this.$notify.error({
                  title: "错误",
                  message: "这是一条错误的提示消息",
                });
              }
            })
            .catch((err) => {
            });
        },
        add() {
          this.title = "新增";
          this.form.id=0;
          this.form.name = "";
          this.form.code = "";
          this.form.link = "";
          this.form.pid = "";
          this.form.type = "";
          this.centerDialogVisible = true;
        },
        onSubmit() {
          if (this.title == "新增") {
            this.$axios
              .post("/rbacPerm/addOne", this.form)
              .then((res) => {
                console.log(res);
                if (res.data.code == 500) {
                  this.$message.error(res.data.msg);
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  this.iniPageData(); 
                  this.centerDialogVisible = false; 
                }
              })
              .catch();
          } else {
            this.$axios
              .post("/rbacPerm/editOne", this.form)
              .then((res) => {
                if (res.data.code == 500) {
                  this.$message.error(res.data.msg);
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  this.iniPageData(); 
                  this.centerDialogVisible = false;
                }
              })
              .catch();
          }
        },
        editRow(scope) {
          this.title = "编辑";
          let rows = scope.row;
          this.form.id = rows.id;
          this.form.name = rows.name;
          this.form.code = rows.code;
          this.form.link = rows.link;
          this.form.pid = rows.pid;
          this.form.type = rows.type;
          this.form.status = rows.status;
          this.centerDialogVisible = true;
        },
        searchByName(){
          this.$axios.get("/rbacPerm/search/"+this.pageInfo.currentPage+"/"+this.pageInfo.pageSize+"?name="+this.message)
            .then((res) => {
              console.log(res);
              this.tableData = res.data.data.list;
              this.pageInfo.currentPage=res.data.data.pageNum,
              this.pageInfo.pageSize=res.data.data.pageSize,
              this.pageInfo.total=res.data.data.total
            })
            .catch();
        },
        changeSize(val){
            this.pageInfo.pageSize=val;
            this.iniPageData();
        },
        changePage(val){
            this.pageInfo.currentPage=val;
            this.iniPageData();
        }
      },
    };
  </script>